<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2008-在线交友聊天室 </title>
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
    <%- include common %>
    <style>
        #chatroom{
            width:300px;
            height:520px;
            border:1px solid darkgoldenrod;
            border-radius: 5px;
            overflow-y: auto;
        }
        *{
        padding: 0;
        margin:0;
    }

    html,body{
        position: relative;
        width:100vw;
        height:100vh;
    }

    #mask{
        width:100vw;
        height:100vh;
        position: absolute;
        top:0;
        left:0;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #box{
        width:200px;
        height:200px;
        background: darkkhaki;
        border:1px solid darkred;
        border-radius: 6px;
        display: none;

    }

    </style>
</head>
<body>
    <%- include('head',{title:'client',username:username}) %>
    <h2> wh2008-在线聊天室 - <span style="color:yellowgreen" id="user"></span></h2>
    <div id="chatroom"></div>

    <input type="text" id="word"> 
    <button id="sendbtn">发送</button>

    <div id="mask">
        <div class="tips">
            链接聊天室服务器中...
        </div>
        <div id="box">
            <input type="text" id="nickname" placeholder="请输入昵称" required>
            <button  id="btn">确定链接</button>        
        </div>
    </div>

    <%- include foot %>

    <script>
        // # 创建 socket 对象
        // # 链接服务器端指定的端口
        // # 发送消息给服务器端
        // # 接收来自服务器的消息
        // # 监听服务器的 失去链接关闭
        var ws = new WebSocket("ws://192.168.58.153:4000");  // 创建链接对象 
        
        // 打开  第一次链接服务器 
        ws.onopen = function(){
            console.log("链接成功---success")
            $(".tips").hide();
            $("#box").show();

        }

        function sendWord(){
            ws.send(word.value)
            word.value = "";
        }
        sendbtn.onclick = function(){
            sendWord()
        }
        
        document.onkeypress = function(e){
            if(e.keyCode==13){
                sendWord()
            }
        }
        

        // 点击链接 发送消息 
        btn.onclick = function(){
            var myname = nickname.value;
            console.log(myname);
            ws.send("大家好,我是 " + myname)    // 发送消息给服务器端
            $("#mask").hide();
            $("#user").text(myname)
        }
        
        // 监听服务器异常 
        ws.onerror = function(err){
            console.log("服务器停止服务了 - 服务异常 ...")
        }
        // 监听服务器端关闭
        ws.onclose = function(){
            console.log("服务器已经关闭了...")
        }
        
        // # 接收来自服务器的消息
        ws.onmessage = function(data){
            console.log(data)    
            $("#chatroom").append(`<p style="color:#666;font-size:14px">${data.data}</p>`);
        }
    </script>
</body>
</html>